<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<scroll-view scroll-y="true" v-if="isLoaded">
			<view class="title-box">
				<view class="title">
					<image class="title-img" src="/static/images/zuogang.png"></image>
					<text class="title2">基本信息</text>
				</view>
			</view>

			<view class="info">

				<view class="img-wrapper-header">
					<image class="pic" :src="avatar"></image>
					<view class="img-wrapper-center">
						<view class="img-wrapper-center1">
							<text>{{realname}}</text>
							<text style="margin-left:13rpx;"> {{sex}} </text>
							<text style="margin-left:13rpx;"> {{age}}岁</text>
						</view>

						<view class="img-wrapper-center2">
							<image src="/static/images/yirenzheng.png" style="width:97rpx;height:38rpx;">
							</image>
							<text class="img-wrapper-center2-year">
								{{work_year}}年
							</text>
						</view>
					</view>
				</view>
				<view class="work">
					{{jobsort}}
				</view>

				<view class="info-text-mobile">
					联系电话：{{mobile}}
					<image @tap="contact" src="/static/images/dianhua.png" mode=""
						style="width:64rpx;height: 64rpx;margin-left: 50rpx;"></image>
				</view>
				<view class="info-text">
					发布时间：{{regtime}}
				</view>
				<view class="info-text">
					所在城市：{{jobarea}}
				</view>

			</view>

			<view class="title-box" style="padding-top: 0rpx;">
				<view class="title">
					<image class="title-img" src="/static/images/zuogang.png"></image>
					<text class="title2">个人介绍</text>
				</view>
				<view class="introduce">
					{{introduction}}
				</view>
			</view>
		</scroll-view>

		<!-- <view class="buttons"> -->
		<!-- <view class="buttons-content"> -->
		<!-- <view class="buttons-left"> -->
		<!-- <view class="buttons1" v-if="isCollect == 0" @tap="addCollect">
						<image class="buttons-img" src="@/static/images/soucahng1.png" alt=""></image>
						<view class="">
							收藏
						</view>
					</view>

					<view class="buttons1" v-if="isCollect == 1" @tap="delCollect">
						<image class="buttons-img" src="@/static/images/soucahng2.png" alt=""></image>
						<view class="" style="color:#b8481d">
							取消收藏
						</view>
					</view> -->
		<!-- <view class="buttons2">
						<image class="buttons-img" src="@/static/images/fenxiang.png" alt=""></image>
						<view class="">
							分享
						</view>
					</view> -->
		<!-- <view class="buttons3" @tap="talk">
						<image class="buttons-img" src="@/static/images/lijigoutong.png" alt=""></image>
						<view class="">
							立即沟通
						</view>
					</view> -->
		<!-- </view> -->

		<!-- <view class="buttons4" @tap="contact">
					<image class="buttons4-img" src="@/static/images/lianxidianhua.png" alt="">
					</image>

				</view> -->
		<!-- </view> -->
		<!-- </view> -->

	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import BottomTabbar from '@/components/bottom-tabbar/bottom-tabbar.vue';
	export default {
		data() {
			return {
				title: '劳务详情',
				uid: 0,
				isLoaded: false,
				cate: 0,

				realname: '',
				sex: '',
				introduction: '',
				jobsort: '',
				avatar: '',
				age: 0,
				work_year: '',
				jobarea: '',
				mobile: '',
				realmobile: '',
				regtime: '',

				//收藏
				isCollect: 0,
			}
		},
		components: {
			// Header,
			BottomTabbar
		},

		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.getInfo(this.uid);

			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)

		},

		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},

		onLoad: function(option) {
			//option为object类型，会序列化上个页面传递的参数
			// console.log(option);
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.uid = option.uid
			// this.title = option.title
			uni.showLoading({
				title: '加载中...'
			});
			this.getInfo(this.uid);
			this.isLoaded = true;
			uni.hideLoading();

		},
		methods: {
			async getInfo(uid) {
				let token = uni.getStorageSync('token');
				let infoObj = await this.$myRequest({
					url: '/getUserInfoToCom',
					data: {
						token: token,
						person_uid: uid
					},
					methods: 'POST'
				})

				let userInfo = infoObj.data.data;
				if (userInfo.avatar) {
					this.avatar = userInfo.avatar
				}

				if (userInfo.realname) {
					this.realname = userInfo.realname
				}

				switch (userInfo.sex) {
					case 1:
						this.sex = '男';
						break;
					case 2:
						this.sex = '女';
						break;
				}

				if (userInfo.age) {
					this.age = userInfo.age
				}

				if (userInfo.jobsort1) {
					this.jobsort = userInfo.jobsort1
				}

				if (userInfo.work_year) {
					this.work_year = userInfo.work_year
				}

				if (userInfo.jobarea1) {
					this.jobarea = userInfo.jobarea1
				}

				if (userInfo.mobile) {
					this.realmobile = userInfo.mobile
					this.mobile = userInfo.mobile.substring(0, 3) + 'xxxx' + userInfo.mobile.substring(7);
				}

				if (userInfo.regtime) {
					this.regtime = userInfo.regtime
				}

				if (userInfo.introduction) {
					this.introduction = userInfo.introduction
				}

				this.cate = uni.getStorageSync('cate')
				if (this.hasLogin && this.cate == 2) {
					let token = uni.getStorageSync('token')
					let res = await this.$myRequest({
						url: '/isCollectWorker',
						data: {
							token: token,
							person_uid: uid
						},
						methods: 'POST'
					})

					if (res.data && res.data.data == 1) {
						this.isCollect = 1
					}

					this.addBrowerWorker();
				}

			},

			async addBrowerWorker() {
				let token = uni.getStorageSync('token')
				let dataObj = {
					token: token,
					personal_uid: this.uid
				}

				//添加浏览记录
				await this.$myRequest({
					url: '/addBrowseWorker',
					data: dataObj,
					methods: 'POST'
				})
			},

			async addCollect() {
				if (!this.hasLogin || this.cate != 2) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?cate=2'
						})
					}, 1000)
					return false;
				}

				let res = await this.$myRequest({
					url: '/addCollectWorker',
					data: {
						token: uni.getStorageSync('token'),
						person_uid: this.uid
					},
					methods: 'post'
				})
				if (res.data.status >= 1) {
					this.isCollect = 1;

					uni.$emit('changeCollectionWorks');
				}

				this.$api.msg(res.data.msg)
			},

			async delCollect() {
				if (!this.hasLogin || this.cate != 2) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?cate=2'
						})
					}, 1000)
					return false;
				}

				let res = await this.$myRequest({
					url: '/delCollectWorker',
					data: {
						token: uni.getStorageSync('token'),
						person_uid: this.uid
					},
					methods: 'post'
				})
				if (res.data.status >= 1) {
					this.isCollect = 0;

					uni.$emit('changeCollectionWorks');
				}

				this.$api.msg(res.data.msg)
			},

			async contact() {
				if (!this.hasLogin || this.cate != 2) {
					this.$api.msg('请先登录！');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?cate=2'
						})
					}, 1000)
					return false;
				}
				uni.makePhoneCall({
					phoneNumber: this.realmobile
				});
			}

		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss' scoped>
	.title-box {
		font-size: $font-base;
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif
		
		// #ifdef MP-WEIXIN
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		.title {
			width: 100%;
			padding: 31rpx 44rpx;
			background-color: #fff;
			line-height: 42rpx;
			/* position: relative; */
			border-bottom: 1px solid #f3f3f6;

			.title-img {
				width: 6rpx;
				height: 27rpx;
				margin-right: 21rpx;
			}

			.title2 {
				height: 42rpx;
				color: #333;
				font-size: 30rpx;
				/* font-weight: bold; */
			}
		}

		.introduce {
			padding: 31rpx 44rpx;
			background-color: #fff;
			line-height: 48rpx;
			font-size: $font-base !important;
			color: #676767;
			text-indent: 2em;
			/*两端对齐*/
			text-align: justify;
		}

	}

	.info {
		font-size: $font-base;
		width: 100%;
		height: 460rpx;
		padding: 44rpx;
		background-color: #fff;
		position: relative;
		border-bottom: 1px solid #f3f3f6;

		.img-wrapper-header {
			margin-bottom: 27rpx;
			height: 115rpx;
			position: relative;

			.pic {
				width: 115rpx;
				height: 115rpx;
				border-radius: 50%;
				margin-right: 17rpx;
			}

			.img-wrapper-center {
				height: 112rpx;
				display: inline-block;
				position: absolute;
				line-height: 56rpx;
				color: #333333;

				.img-wrapper-center-button {
					/* display: inline-block; */
					width: 63rpx;
					height: 39rpx;

					display: flex;
					align-items: center;
				}

				.img-wrapper-center2 {
					display: flex;
					height: 38rpx;

					.img-wrapper-center2-year {
						margin-left: 20rpx;
						padding: 0 12rpx;
						background-color: #3371f0;
						color: #fff;
						border-radius: 10rpx;
						line-height: 38rpx !important;
						height: 38rpx !important;
						font-size: 24rpx;
					}
				}
			}

		}

		.info-text {
			height: 60rpx;
			line-height: 60rpx;
			color: #676767;
		}

		.info-text-mobile {
			height: 64rpx;
			line-height: 64rpx;
			color: #676767;
			display: flex;
		}

		.work {
			display: inline-block;
			background-color: #ebebeb;
			padding: 6rpx 10rpx;
			border-radius: 6rpx;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}

	}

	.buttons {
		font-size: $font-base;
		width: 100%;
		height: 148rpx;
		background-color: #f8f8f8;
		position: fixed;
		bottom: 0;

		.buttons-content {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			/* .buttons-left {
				width: 50%;
				display: inline-flex;
				align-items: center;
				justify-content: space-between;

				/* .buttons1, */
			/* .buttons2, */
			/* .buttons1 {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					/* justify-content: center; */
			/* height: 148rpx;
					line-height: 148rpx;
					padding-top: 30rpx;
				}

				.buttons-img { */
			/* display: block; */
			/* position: fixed;
					width: 42rpx;
					height: 35rpx; */
			/* } */
			/* } */

			/* .buttons4 {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				width: 50%
			} */
		}

		.buttons4-img {
			width: 213rpx;
			height: 57rpx;
		}
	}
</style>
